<template>
	<md-field-group class="register_view">
		<div>我们将发送验证码到您的手机</div>
		<md-field
				v-model="mobile"
				icon="mobile"
				placeholder="请输入手机号"/>

		<div class="register_submit">
			<van-button size="large" type="danger" @click="submitCode">下一步</van-button>
		</div>

		<div class="register_footer">
			已有账号?
			<router-link to="/login" class="red">登录</router-link>
		</div>
	</md-field-group>
</template>

<script>
	import field from '@/components/field/';
	import fieldGroup from '@/components/field-group/';
	import {mobileReg} from '@/utils/validate';

	export default {
		data() {
			return {
				mobile: ''
			};
		},

		methods: {
			submitCode() {
				if (this.mobile === '') {
					return
				}
				if (!mobileReg.test(this.mobile)) {
					this.mobile = '';
					return
				}
				try {
					this.$router.push({
						name: 'registerSubmit',
						params: {phone: this.mobile}
					});
				} catch (error) {
					console.log(error.message);
				}
			}
		},

		components: {
			[field.name]: field,
			[fieldGroup.name]: fieldGroup
		}
	};
</script>

<style lang="scss" scoped>
	div.register_view {
		background-color: #fff;
		padding-top: 30px;
	}

	div.register_submit {
		padding-top: 30px;
		padding-bottom: 20px;
	}

	.register_footer {
		text-align: right;
		color: $font-color-gray;
	}
</style>
